<template>
  <div class="details">
    <el-page-header @back="goBack" :content="goodsName"> </el-page-header>
    <el-descriptions
      class="margin-top"
      title="当前信息"
      :column="2"
      style="margin-top: 12px"
      direction="vertical"
    >
      <el-descriptions-item label="当前均价">
        <span style="font-weight: 500"> {{ averagePrice || 0 }}元 </span>
      </el-descriptions-item>
      <el-descriptions-item label="当前出售">
        <span style="font-weight: 500"> {{ quantitySale || null }}件 </span>
      </el-descriptions-item>
    </el-descriptions>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="customerName"
        label="用户名"
        width="100px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="saleMinPrice" label="上架价格" align="center">
        <template slot-scope="scope">
          <span style="color: #ff0000">
            {{ scope.row.saleMinPrice || "0" }}元
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="time"
        width="180px"
        label="更新时间"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "details",
  props: {},
  components: {},
  data() {
    return {
      pid: null,
      nftProductSizeId: null,
      goodsName: "",
      productPicture: null,
      tableData: [],
      count: 0,
      averagePrice: 0,
      premium: 0,
      quantitySale: 0,
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.productPicture = this.$route.query.productPicture;

    this.getGoodsQuery();
  },
  methods: {
    getGoodsQuery() {
      this.pid = this.$route.query.pid;
      this.nftProductSizeId = this.$route.query.nftProductSizeId;
      this.goodsName = this.$route.query.name;
      console.log(this.productPicture);
      axios
        .get(
          `http://110.40.209.136/api/metaAnalysis/all/details?pid=${this.pid}&nftProductSizeId=${this.nftProductSizeId}`
        )
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          let arr = res.data.data;
          this.quantitySale = res.data.data[0].saleCount;
          arr.map((item) => {
            this.count += item.saleMinPrice;
          });
          this.averagePrice = this.count / res.data.data.length;
          this.premium = (
            1 -
            res.data.data[0].saleMinPrice / this.averagePrice
          ).toFixed(2);
          console.log(this.premium);
        });
    },
    goBack() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped lang="less">
.details_img {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
</style>
